<!DOCTYPE html>
<html>
<head>
    <title>通行人员管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet">
    <link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet">
</head>
<body>
<div class="demo-content">
<div class="row">
    <div class="span14" style="padding: 10px">
        <div class="panel panel-head-borded panel-small">
            <div class="panel-header">人员列表</div>
            <div id="grid">
            </div>
        </div>
    </div>
    <div class="span10">
        <div class="panel panel-head-borded panel-small">
            <form name="templetForm" method="" action="" id="templetForm" class="form-horizontal">
                <legend>基本信息</legend>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>名称：</label>
                        <div class="controls">
                            <input name="Name" type="text" class="input-small" data-rules="{required:true}">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>认证方式：</label>
                        <div class="controls">
                            <select name="Identify" class="input-normal">
                                <option value="1">卡认证</option>
                                <option value="2">密码认证</option>
                                <option value="3">卡+密码认证</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>人组：</label>
                        <div class="controls">
                            <select name="memberGroup" class="input-normal">
                                <option value="1">人组1</option>
                                <option value="2">人组2</option>
                                <option value="3">人组3</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">证章模板：</label>
                        <div class="controls">
                            <select name="badgeTemplate" class="input-normal">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>动作：</label>
                        <div class="controls">
                            <select name="action" class="input-normal">
                                <option value="1">尾随</option>
                                <option value="2">报警</option>
                                <option value="3">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">描述：</label>
                        <div class="controls">
                            <input name="description" type="text" class="control-text">
                            </select>
                        </div>
                    </div>
                </div>
                <legend>卡信息</legend>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>卡号：</label>
                        <div class="controls">
                            <input name="cardId" type="text" class="control-text"data-rules="{required:true}">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>卡类型：</label>
                        <div class="controls">
                            <select name="type" class="input-normal">
                                <option value="1">身份证</option>
                                <option value="2">IP卡</option>
                                <option value="3">CPU卡</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>卡等级：</label>
                        <div class="controls">
                            <input name="authority" type="text" class="control-text"data-rules="{required:true}">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">卡附加信息：</label>
                        <div class="controls">
                            <select name="comment" class="input-normal">
                                <option value="1">丢失</option>
                                <option value="2">损坏</option>
                                <option value="3">被盗</option>
                            </select>
                            </select>
                        </div>
                    </div>
                </div>
                <legend>密码信息</legend>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>pin码：</label>
                        <div class="controls">
                            <input name="pinCode" type="text" class="control-text"data-rules="{required:true}">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>胁迫码：</label>
                        <div class="controls">
                            <input name="duressCode" type="text" class="control-text"data-rules="{required:true}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>pin码长度：</label>
                        <div class="controls">
                            <input name="pinCodeLen" type="text" class="control-text"data-rules="{required:true}">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>胁迫码长度：</label>
                        <div class="controls">
                            <input name="duressCodeLen" type="text" class="control-text"data-rules="{required:true}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>胁迫等级：</label>
                        <div class="controls">
                            <input name="duressAuthority" type="text" class="control-text"data-rules="{required:true}">
                        </div>
                    </div>
                </div>
                <legend>规则信息</legend>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">时间规则特权：</label>
                        <div class="controls">
                            <input name="timeRule" type="checkbox" >
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">多人规则特权：</label>
                        <div class="controls">
                            <input name="abRule" type="checkbox" >
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">潜回特权：</label>
                        <div class="controls">
                            <input name="lineRule" type="checkbox" >
                        </div>
                    </div>
                </div>
                <legend>时间信息</legend>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>生效时间：</label>
                        <div class="controls">
                            <input name="activeStart" type="text" class="calendar" data-rules="{required:true}">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label"><s>*</s>失效时间：</label>
                        <div class="controls">
                            <input name="activeEnd" type="text" class="calendar" data-rules="{required:true}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">延长开门时间(秒)：</label>
                        <div class="controls">
                            <input name="accessTimeExtension" type="text" class="control-text">
                        </div>
                    </div>
                </div>
                <div class="row form-actions actions-bar">
                    <div class="span13 offset3 ">
                        <button type="submit" class="button button-primary">保存</button>
                        <button type="reset" class="button">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>
<script src="../../resources/lib/bui/js/bui-min.js"></script>
<!-- script start-->
<script type="text/javascript">
   BUI.use(['bui/grid','bui/data'],function(Grid,Data){
       var Grid = Grid,
               Store = Data.Store,
               enumObj = {"1" : "男","2" : "女"},
               memberObj = {"1" : "销售部","2" : "研发部","3" : "工程部","4":"技术部","5":"人力资源部"},
               columns = [
                   {title : '姓名',dataIndex :'a',editor : {xtype : 'text'}}, //editor中的定义等用于 BUI.Form.Field.Text的定义
                   {title : '性别',dataIndex : 'b', editor : {xtype :'select',items : enumObj},renderer : Grid.Format.enumRenderer(enumObj)},
                   {title : '年龄',dataIndex : 'c', editor : {xtype : 'text'}},
                   {title : '部门',dataIndex : 'd', editor : {xtype :'select',items : memberObj},renderer : Grid.Format.enumRenderer(memberObj)},
                   {title : '操作',dataIndex:'e',renderer : function(){
                       return '<span class="grid-command btn-edit">编辑</span>'
                   }}
               ],
               data = [{a:'张三',b:'1',c:'23',d:'1'},
                   {a:'李四',b:'2',c:'26',d:'2'},
                   {a:'王五',b:'1',c:'29',d:'3'},
                   {a:'赵六',b:'2',c:'21',d:'4'},
                   {a:'刘七',b:'1',c:'27',d:'5'}];

       var editing = new Grid.Plugins.RowEditing({
                   triggerCls : 'btn-edit',
                   triggerSelected : false
               }),
               store = new Store({
                   data : data,
                   autoLoad:true
               }),
               grid = new Grid.Grid({
                   render:'#grid',
                   columns : columns,
                   width : 548,
                   forceFit : true,
                   tbar:{ //添加、删除
                       items : [{
                           btnCls : 'button button-small',
                           text : '<i class="icon-plus"></i>添加',
                           listeners : {
                               'click' : addFunction
                           }
                       },
                           {
                               btnCls : 'button button-small',
                               text : '<i class="icon-remove"></i>删除',
                               listeners : {
                                   'click' : delFunction
                               }
                           }]
                   },
                   plugins : [editing,Grid.Plugins.CheckSelection],
                   store : store
               });

       grid.render();

//添加记录
       function addFunction(){
           var newData = {b : 0};
           store.addAt(newData,0);
           editing.edit(newData,'a'); //添加记录后，直接编辑
       }
//删除选中的记录
       function delFunction(){
           var selections = grid.getSelection();
           store.remove(selections);
       }
   });

   var Form = BUI.Form;

    var form = new Form.Form({
        srcNode : '#templetForm'
    });
    form.render();

    form.on('beforesubmit',function(){
        if(!editing.isValid()){
            return false;
        }
    });

    BUI.use('bui/calendar',function(Calendar){
        var datepicker = new Calendar.DatePicker({
            trigger:'.calendar',
            autoRender : true
        });
    });
</script>
<!-- script end -->
</div>
</body>
</html>